<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../assets/js/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.css" rel="stylesheet">
    <style>
      .bg-bgform{
        background-color: #ddd !important;
      }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="row justify-content-md-center mt-3 ">
                <div class="col-6 bg-bgform card">
                  <div class="card-body">
                      <form>
                          <div class="form-group">
                            <label for="exampleInputEmail1">产品名称</label>
                            <input type="text" class="form-control form-control-sm"
                            v-model="product.name" >
                          </div>
                          <div class="form-group">
                              <label for="exampleInputEmail1">产品单价</label>
                              <input type="number" class="form-control form-control-sm" 
                            v-model.number="product.price">
                          </div>
                          <div class="form-group">
                              <label for="exampleInputEmail1">购买数量</label>
                              <input type="number" class="form-control form-control-sm" 
                              v-model.number="product.num">
                          </div>
                          <button type="button" class="btn btn-info btn-block" @click="addItemToList()">添加到购物车</button>
                      </form>                
                  </div>
                </div>
            </div>
            <div class="row justify-content-center mt-4">
                <div class="col-8" >
                  <table class="table table-bordered">
                    <thead class="thead-dark" align="center">
                      <tr>
                        <th scope="col">
                          <input type="checkbox"  v-model="all">
                        </th>
                        <th scope="col">编号</th>
                        <th scope="col">产品名称</th>
                        <th scope="col">产品价格</th>
                        <th scope="col">产品数量</th>
                        <th scope="col">操作</th>
                      </tr>
                    </thead>
                    <tbody align="center">
                      <tr v-if=" cartList.length==0">
                        <td colspan="6">暂无数据</td>
                      </tr>
                     <template v-else>
                      <tr v-for="(p,i) in cartList">
                        <th scope="row" class="align-middle">
                          <input type="checkbox"  :value="p" v-model="selectList">
                        </th>
                        <td class="align-middle">{{i+1}}</td>
                        <td class="align-middle">{{p.name}}</td>
                        <td class="align-middle">{{p.price}}元</td>
                        <td class="align-middle">
                          <div class="input-group " style="width: 120px;" >
                            <div class="input-group-prepend">
                              <button class="btn btn-outline-secondary bi bi-plus-lg" type="button" 
                              @click="changeNum(i,1)"></button>
                            </div>
                            <input type="text" class="form-control"
                             :value="p.num" >
                            <div class="input-group-append">
                              <button class="btn btn-outline-secondary bi bi-dash-lg" type="button"
                              @click="changeNum(i,-1)"></button>
                            </div>
                          </div>                      
                        </td>
                        <td class="align-middle"> 
                          <button  type="button" class="btn btn-danger" @click="removeItem(i)">删除</button>
                        </td>
                      </tr>
                    </tbody>
                    <tfoot  align="center">
                      <tr >
                        <td colspan="2" class="align-middle">总计：</td>
                        <td colspan="3" class="align-middle">
                          被选中<span class="text-danger">{{ count.size }}</span>个,
                          总价<span class="text-danger">{{ count.sum }}</span>元
                        </td>
                        <td class="align-middle">
                          <button  type="button" class="btn btn-danger" @click="removeSelectItem()">删除选中项</button>
                        </td>
                      </tr>
                    </tfoot>
                     </template>
                  </table>                  
                </div>
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                product:{
                  name:'华为手机',
                  price:4000,
                  num:1
                },
                cartList:[],
                selectList:[],
            },
            computed:{
              all:{
                get(){
                  if(this.cartList.length==0||this.selectList.length==0){
                    return false;
                  }
                   var p=JSON.stringify(this.selectList)
                  //  for(let i=0;i<this.cartList.length;i++){
                  //       var sp=JSON.stringify(this.cartList[i]);
                  //       if(p.indexOf(sp)==-1){
                  //         return false;
                  //       }
                  //  }
                  //  return true;
                  return this.cartList.every(sp=> p.indexOf(JSON.stringify(sp))!=-1)
                },
                set(nv){
                  if(nv){
                    this.selectList = [ ...this.cartList ];
                  }else{
                    this.selectList=[];
                  }
                }
              },
              count(){
                  var sum=0;
                  // for (let key in this.selectList) {
                  //   sum+=this.selectList[key].num*this.selectList[key].price;
                  // }
                  sum=this.selectList.reduce((c,p)=> c+=p.num*p.price ,0)
                  return {
                    size:this.selectList.length,
                    sum:sum
                  }
              }
            },
            methods: {
              addItemToList(){
                this.cartList.push({...this.product,
                                       id:Math.ceil(Math.random()*10000)});
              },
              changeNum(i,n){
                let num=this.cartList[i].num+n
                if(num>0){
                  this.cartList[i].num=num
                  return;
                }
                let flag=confirm("是否删除商品？")
                if(flag){
                  this.removeItem(i);
                }
              },
              removeItem(i){
                let p=this.cartList[i];
                for (let key in this.selectList) {
                    if(JSON.stringify(p)==JSON.stringify(this.selectList[key])){
                        this.selectList.splice(key,1);
                    }
                }
                this.cartList.splice(i,1);
              },
              removeSelectItem(){
                if(this.all){
                  this.cartList=[];
                  this.selectList=[];
                  return;
                }
                for(var i=0;i<this.selectList.length;i++){
                  var p=JSON.stringify(this.selectList[i]);
                  for(var j=0;j<this.cartList.length;j++){
                    var sp=JSON.stringify(this.cartList[j]);
                    if(p==sp){
                      this.cartList.splice(j,1);
                      break;
                    }
                  }
                }
                this.selectList=[];
              }
            },
        })
    </script>
</body>
</html>